
import { View } from "@tarojs/components";
import { Cell,Popup,DatetimePicker,Checkbox} from "@taroify/core"
import { Button } from "@antmjs/vantui";
import { useState } from "react";

const FilterContent: React.FC = () => {
  const [inspectDate,setInspectDate]=useState(false)
  const [value, setValue] = useState(new Date(2023, 10, 14))
  const [inspectPerson,setInspectPerson]=useState(false)

  return (
  <>
   <View className="w-full p-3 flex flex-col rounded-lg">
     <View className="flex">
      <Cell title="食品品种" required>糕点</Cell>
     </View>
     <View className="flex">
      <Cell title="自查日期" required isLink bordered 
      children='2023-10-14' 
      onClick={()=>{setInspectDate(true)}}/>
     </View>
     <View className="flex">
      <Cell title="检查人员" required isLink 
      children="1" 
      onClick={()=>{setInspectPerson(true)}}
      />
     </View>
   </View>

   {/* 选择自查日期 */}
   <Popup 
      open={inspectDate} 
      rounded 
      placement="bottom" 
      onClose={()=>{setInspectDate(false)}}
    >
    <DatetimePicker
      type="date"
      value={value}
      onChange={setValue}
    >
      <DatetimePicker.Toolbar
      onClick={()=>{setInspectDate(false)}}
      >
        <DatetimePicker.Button>取消</DatetimePicker.Button>
        <DatetimePicker.Title>选择年月日</DatetimePicker.Title>
        <DatetimePicker.Button>确认</DatetimePicker.Button>
      </DatetimePicker.Toolbar>
    </DatetimePicker>

   </Popup>
    {/* 选择检查人员 */}
   <Popup 
      open={inspectPerson} 
      rounded 
      placement="bottom" 
      onClose={()=>{setInspectPerson(false)}}
    >
      <Checkbox.Group>
      <Cell.Group clickable>
        <Cell title="1">
          <Checkbox name="a" />
        </Cell>
        <Cell title="2">
          <Checkbox name="b" />
        </Cell>
      </Cell.Group>
    </Checkbox.Group>
    <View className="w-full p-4">
      <Button
          type="info"
          className="w-full"
        >
          确定
        </Button>
    </View>
   </Popup>

 </>
  );
};

export default FilterContent;
